<template>
    <div>
        <el-form :model="form" :rules="rules" label-position="right" ref="form" label-width="160px">
            <el-form-item label="广告栏目名称：" prop="cbc_name">
                <el-col :span="8">
                    <el-input v-model="form.cbc_name" placeholder="请输入广告栏目名称"></el-input>
                </el-col>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm('form')">提交</el-button>
                <el-button @click="resetForm">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
    import { mapState,mapMutations } from 'vuex'
    export default {
        //数据源
        data(){
            return {
               rules : {
                    cbc_name : [
                        { required: true, message: '广告栏目名称不能为空', trigger: 'blur' }
                    ]
                }
            }
        },
        //初始化函数
        mounted() {

            

        },
        //计算属性
        computed: {
            ...mapState({ 
                form : state => state.AddBannerColumnModule.form
            })
        },
        //组件方法
        methods: {

            submitForm(form){

                this.$refs[form].validate((valid) => {

                    if (valid) {

                        var addParams = {
                            cbc_name        : this.form.cbc_name,
                            cbc_create_time : this.$common.currentTime()
                        }

                        this.$myLoading.startLoading();

                        this.$http.postHttp(this.$API.cmsBannerColumnAdd, addParams , rs => {

                            this.$myLoading.endLoading();
                            this.$myPop.SuccessMessage();
                            this.$store.commit('AddBannerColumnModule/clearForm')

                            
                        });


                    }

                })

            },

            resetForm(){

                this.$store.commit('AddBannerColumnModule/clearForm')

            }

        }
    }
</script>

<style lang="stylus" scoped>
@import '~PUBLIC_CSS';

</style>